<template>
    <view class="footer">
        <view class="container">
            <input class="input" :value="inputText" @input="inputChange" />
            <view :class="{ btn: true, loading: loading }">
                <img src="send.svg" />
                <view class="text" @click="handleSend">发送</view>
            </view>
        </view>

    </view>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    props: ['loading'],
    data() {
        return {
            inputText: ""
        }
    },
    onLoad() {

    },
    methods: {
        inputChange(event: any) {
            this.inputText = event.detail.value
        },
        handleSend() {
            if (this.loading || this.inputText == "") return
            this.$emit("sendText", this.inputText)
            this.inputText = ""
        }
    }
});
</script>

<style scoped>
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 220rpx;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    /* display: flex; */
    /* background: red; */
    border-top: 2rpx solid #dedede;
    background: white;
}

.container {
    display: flex;
    border-radius: 20rpx;
    border: 2rpx solid #dedede;
    padding: 20rpx 28rpx;
    align-items: stretch;
}

.input {
    flex-grow: 1;
    margin-right: 20rpx;
    /* border: 2rpx solid #dedede; */
    height: auto
}

.btn {
    padding: 32rpx;
    border: 2rpx solid #dedede;
    border-radius: 20rpx;
    /* height: 32rpx; */
    background-color: #1d93ab;
    color: #fff;
    display: flex;
    align-items: center;
    width: 98rpx;
    justify-content: space-between;
}

.loading {
    background-color: #dedede;
}
</style>